<template>
	<view class="record">
		<view class="record_top">
			<view class="record_item borderBottom" @click="showDialog = true">
				<view>维修类型</view>
				<view class="typeContent">
					<text>{{ status === 1 ? '设备维修' : '部件更换' }}</text>
					<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="record_item borderBottom" @click="choosePart(recordList)">
				<view class="typeContent">部件选择</view>
				<view class="choosePart" v-if="checkContentLsit.length">
					<view class="choosePartItem">
						<view v-for="(item, index) in checkContentLsit" :key="item.id">
							{{ item.name }}
							<text v-if="index !== checkContentLsit.length - 1">，</text>
						</view>
					</view>
					<view><uni-icons type="arrowright" size="14" color="#999"></uni-icons></view>
				</view>
				<view v-else>
					请选择
					<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<view class="mian_content">
			<view v-for="(item, index) in recordList" :key="item.id" :class="['content_item', index === recordList.length - 1 ? 'bottomPadding' : '']">
				<view class="record_item imgItem borderBottom">
					<view class="partTitle">
						<view style="color: #333;font-weight: 600;">{{ item.checkContentName }}</view>
						<view class="del" @click="handleDelPart(item)">
							<uni-icons type="trash" size="16" color="#999"></uni-icons>
							删除部件
						</view>
					</view>
					<view class="des">检测记录</view>
					<image-drag-sort :list="item.mfImgUrl" class="imgBox" @changeList="changeList($event, item, index, 1)" @delImg="delPartImg()" tips="上传图片"></image-drag-sort>
					<view class="remark"><input type="text" placeholder="请在此输入备注..." v-model="item.mfDesc" @blur="handleUpdate(item)" /></view>
				</view>
				<view class="record_item imgItem">
					<view class="des">处理结果</view>
					<image-drag-sort :list="item.disposeImgUrl" class="imgBox" @changeList="changeList($event, item, index, 2)" tips="上传图片"></image-drag-sort>
					<view class="remark"><input type="text" placeholder="请在此输入备注..." v-model="item.disposeDesc" @blur="handleUpdate(item)" /></view>
				</view>
			</view>
		</view>

		<view class="bottom"><view class="flex" @click="handleSave">保存</view></view>
		<neil-modal :show="showDialog" title="维修类型" confirmText="确认" @close="showDialog = false" @confirm="chooseConfirm(status)">
			<view class="statusType">
				<view v-for="(item, index) in typeList" :key="item" @click="changeType(item)">
					<text>{{ item === 1 ? '设备检测' : '更换部件' }}</text>
					<uni-icons :type="item === status ? 'circle-filled' : 'circle'" size="14" :color="status === item ? '#0091ff' : '#999'"></uni-icons>
				</view>
			</view>
		</neil-modal>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import neilModal from '@/components/neil-modal/neil-modal.vue';
import ImageDragSort from '@/components/image-drag-sort/index.vue';
import { getRecord, updateRecord, addRecord, deleteCheckContent, maintenanceType } from '@/apis/repair.js';
export default {
	components: {
		neilModal,
		ImageDragSort
	},
	data() {
		return {
			showDialog: false,
			typeList: [1, 2], // 1为设备检测,2为更换部件
			status: 1,
			testRecordList: [],
			handleResultList: [],
			testRecord: '',
			handleResult: '',
			isEdit: false,
			checkContentLsit: [],
			recordList: [],
			groupId: '',
			planId: ''
		};
	},
	onLoad(option) {
		const result = JSON.parse(option.params);
		console.log(result, 'result');
		const { groupId, planId, isEdit } = result;
		this.groupId = groupId;
		this.planId = planId;
		this.isEdit = result.isEdit;
		uni.$on('repairUpdate', this.test);
	},
	beforeDestroy() {
		uni.$off('repairUpdate');
	},
	onShow(option) {
		// if (this.isEdit) {}
		this.queryRecordDeatil();
	},
	methods: {
		test(data) {
			console.log(data, '接受的参数');
			const { groupId, planId, isEdit } = data;
			this.groupId = groupId;
		},
		getCheckContentList(list) {
			// console.log(list,1111)
			this.checkContentLsit = list;
		},
		// 查询详情
		queryRecordDeatil() {
			uni.showLoading({
				title: '数据加载中'
			});
			getRecord({ groupId: this.groupId, planId: this.planId }).then(res => {
				console.log(res, '记录详情');
				if (res) {
					uni.hideLoading();
					this.recordList = res.data;
					const tempArr = [];
					res.data.forEach(({ checkContentName, checkContentId }) => {
						tempArr.push({
							name: checkContentName,
							id: checkContentId
						});
					});
					console.log(tempArr,1111);
					if (res.data.length) {
						this.status = res.data[0].status;
					}
					this.checkContentLsit = tempArr;
				}
			});
		},
		// 图片改变
		changeList(list, item, index, type) {
			// if (this.isEdit) {
			// 	if (type === 1) {
			// 		// console.log('这是检测图片')
			// 		this.recordList[index].mfImgUrl = list;
			// 		this.handleUpdate(this.recordList[index]);
			// 	}
			// 	if (type === 2) {
			// 		console.log('这里是处理结果');
			// 		this.recordList[index].disposeImgUrl = list;
			// 		this.handleUpdate(this.recordList[index]);
			// 	}
			// } else {
			// 	console.log('这里是新增');
			// }
			if (type === 1) {
				// console.log('这是检测图片')
				this.recordList[index].mfImgUrl = list;
				this.handleUpdate(this.recordList[index]);
			}
			if (type === 2) {
				console.log('这里是处理结果');
				this.recordList[index].disposeImgUrl = list;
				this.handleUpdate(this.recordList[index]);
			}
		},
		// 删除接口
		handleDelPart({ checkContentId }) {
			// console.log(this.isEdit,item)
			// return
			// const that=this
			uni.showModal({
				content: '确定要删除该部件吗？',
				cancelText: '否',
				confirmText: '是',
				success: res => {
					if (res.confirm) {
						// console.log(item,"item的值")
						// 删除部件事件
						console.log(11111);
						console.log(this.planId, 'planId');
						// return
						deleteCheckContent({ checkContentId, planId: this.planId }).then(res => {
							console.log(res, '删除');
							if (res) {
								this.queryRecordDeatil();
							}
						});
					}
				}
			});
		},
		// 点击了模态框确认
		chooseConfirm(res) {
			// 如果是修改发送请求
			if (this.groupId) {
				uni.showLoading({
					title: '数据加载中'
				});
				maintenanceType({ groupId: this.groupId, planId: this.planId, status: res }).then(res => {
					console.log(res);
					uni.hideLoading();
				});
			} else {
				this.changeType(res);
			}
		},
		changeType(res) {
			// console.log(res)
			this.status = res;
			console.log(this.status, '选择的时候');
		},

		// 更新部件任务
		handleUpdate(item) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			updateRecord([item]).then(res => {
				console.log('更新接口');
				if (res) {
					// uni.hideLoading();
					this.queryRecordDeatil();
				}
			});
		},
		// 保存
		handleSave() {
			let msg = '';
			for (let i = 0; i < this.recordList.length; i++) {
				if (this.recordList[i].mfDesc === null && this.recordList[i].mfImgUrl === null) {
					msg = `${this.recordList[i].checkContentName}检测记录未填写`;
					break;
				}
				if (this.recordList[i].disposeDesc === null && this.recordList[i].disposeImgUrl === null) {
					msg = `${this.recordList[i].checkContentName}处理结果未填写`;
					break;
				}
			}
			if (msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			} else {
				uni.navigateBack();
			}
		},
		choosePart(res) {
			// debugger
			// console.log(this)
			console.log(res, this.groupId, 'groupId', this.status);
			const list = res.map(item => {
				return {
					checkContentId: item.checkContentId,
					checkContentName: item.checkContentName,
					id: item.id
				};
			}); 
			const params = {
				list,
				planId: this.planId,
				groupId: this.groupId,
				status: this.status
			};
			console.log(params, 'params');
			// return
			uni.navigateTo({
				url: `/pages/choosePart/choosePart?params=${JSON.stringify(params)}`
			});
		}
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #f3f6f8;
	position: relative;
}
</style>
<style lang="scss" scoped>
.record {
	// padding: 14rpx;
}
.bottomPadding {
	padding-bottom: 50rpx;
}

.partTitle {
	font-size: 28rpx;
	// font-weight: 600;
	width: 100%;
	box-sizing: border-box;
	color: #333 !important;
	display: flex;
	height: 100rpx;
	justify-content: space-between;
	align-items: center;
	.del {
		color: #999;
		font-size: 28rpx;
		width: 200rpx;
		padding-left: 10rpx;
		justify-content: flex-end;
		display: flex;
	}
}
.des {
	color: #666;
}
.mian_content,
.record_top {
	background-color: #fff;
	padding: 14rpx;
}
.borderBottom {
	border-bottom: 2rpx solid #e9e9e9;
}
.statusType {
	view {
		height: 112rpx;
		display: flex;
		justify-content: space-between;
	}
}
.choosePart {
	display: flex;
	width: 500rpx;
	flex-wrap: wrap;
	justify-content: space-between;
}
.choosePartItem {
	width: 466rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	view {
		text-align: right;
	}
}
.imgBox {
	padding-top: 30rpx;
}
.content_item {
	margin: 20rpx 0;
}
.record_item {
	padding: 14rpx;
	min-height: 94rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	// border: 2rpx solid #e9e9e9;
	align-items: center;
	color: #333;
	view:nth-child(1) {
		color: #666;
		// width: 200rpx;
	}
	.remark {
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.typeContent {
		text {
			// padding-right: 10rpx;
		}
	}
}
.imgItem {
	flex-direction: column;
	align-items: flex-start;
	// border: 2rpx solid #e9e9e9;
	.imgList {
		display: flex;
	}
	image {
		// width: 150rpx;
		// height: 150rpx;
	}
}

.bottom {
	position: fixed;
	padding: 14rpx;
	bottom: 0;
	left: 0;
	height: 98rpx;
	display: flex;
	justify-content: center;
	width: 100%;

	align-items: center;
	background-color: #ffffff;
	box-sizing: border-box;
	view {
		height: 70rpx;
	}
	view:nth-child(1) {
		width: 722rpx;
		background: #0091ff;
		border-radius: 8rpx;
		color: #ffffff;
	}
	view:nth-child(2) {
	}
}
</style>
